import go from 'gojs'
import config from '../../../config'
import Util from '../../../util'
import { makeFont } from '@/utils'
// import { nodeMouseEnter, nodeMouseLeave } from './mouse'

// helper functions for the templates
function nodeStyle() {
  return [
    {
      type: go.Panel.Spot,
      // layerName: "Background",
      locationObjectName: 'NODE_LOC_SHAPE',
      selectionObjectName: 'NODE_SELECT_SHAPE',
      locationSpot: go.Spot.Center
      // resizable: true, resizeObjectName: "PANEL",
      // selectionAdorned: false  // 拖拽时不显示外框
      // 事件绑定
      // click: function (e, obj) {
      //     alert("Clicked on " + obj.part.data.key);
      // },
      // selectionChanged: function (part) {
      //     const shape = part.elt(0);
      //     // shape.fill = part.isSelected ? "red" : "white";
      //     alert("selectionChanged " + part.data.key);
      // }
    },
    new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(
      go.Point.stringify
    )
  ]
}

export default function() {
  const $$ = go.GraphObject.make // 后面很多用到该变量来初始化diagram

  return $$(
    go.Node,
    'Horizontal', // second argument of a Node/Panel can be a Panel type
    // {
    // 节点高亮效果
    //   mouseEnter: (e, obj) => nodeMouseEnter(e, obj),
    //   mouseLeave: (e, obj) => nodeMouseLeave(e, obj)
    // 选中附加效果
    // selectionAdornmentTemplate: $$(
    //   go.Adornment,
    //   'Auto',
    //   $$(go.Shape, 'Ellipse', {
    //     fill: config.node.select.fill, // 节点填充色
    //     stroke: config.node.select.stroke, // 节点线条颜色
    //     strokeWidth: config.node.select.strokeWidth, // 节点线宽
    //     width: config.node.size[0] + 1, // Ellipse外框宽度
    //     height: config.node.size[1] + 1 // Ellipse外框高度
    //   }),
    //   $$(go.Placeholder)
    // ) // end Adornment
    // },
    nodeStyle(),
    /* 设置节点的外观 */
    $$(
      go.Panel,
      'Auto', // 水平或垂直布局(图片在左，文字在右  或 上下)
      $$(
        go.Shape,
        'Ellipse', // 节点形状为椭圆形
        {
          name: 'NODE_SHAPE', // 名称(gojs可通过名字搜索part,并修改相关属性)
          stroke: config.node.style.stroke, // 节点边框颜色
          strokeWidth: config.node.style.strokeWidth,
          // fill: config.node.style.fillColor, // 节点填充颜色
          fill: config.node.style.stroke, // 节点填充颜色(共用边框颜色)
          portId: '', // so links will go to the shape, not the whole node
          // cursor: "pointer", // the Shape is the port, not the whole Node
          fromLinkable: true,
          toLinkable: true,
          fromLinkableSelfNode: false,
          fromLinkableDuplicates: false,
          toLinkableSelfNode: false,
          toLinkableDuplicates: false,
          desiredSize: new go.Size(config.node.size[0], config.node.size[1])
          // minSize: new go.Size(40, 30)
          // the port is in front and transparent, even though it goes around the text;
          // in "link" mode will support drawing a new link
          // isPanelMain: true
          // fromSpot: go.Spot.AllSides,
          // toSpot: go.Spot.AllSides
        },
        // new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
        new go.Binding('width', 'width').makeTwoWay(),
        new go.Binding('height', 'height').makeTwoWay(),
        // new go.Binding('fill', 'fillColor').makeTwoWay(),
        new go.Binding('fill', 'stroke').makeTwoWay(),
        new go.Binding('stroke', 'stroke').makeTwoWay(),
        new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay()
        // new go.Binding("fill", "isSelected", function (s, obj) { return s ? "red" : obj.part.data.stroke; }).ofObject()
      ),
      $$(
        go.TextBlock,
        'new', // 默认文本
        [
          {
            name: 'NODE_TEXT',
            stroke: config.node.style.stroke,
            font: makeFont(config.node.style.fontSize, false), // 字体
            isMultiline: false,
            // margin: 2,
            // stroke: 'blue',
            editable: false
          },
          // 绑定TextBlock.text 属性为Node.data.key的值，Model对象可以通过Node.data.key获取和设置TextBlock.text
          new go.Binding('text').makeTwoWay(),
          // new go.Binding('font').makeTwoWay(),
          new go.Binding('font', 'fontSize', Util.Go.toFont).makeTwoWay(
            Util.Go.fromFont
          ),
          new go.Binding('stroke', 'fontColor').makeTwoWay()
        ]
      )
    )
  )
}
